<template>
	<view class="index">
		<view class="bf">
			<u-tabs :list="tabs" :current="current" lineWidth="40px" :lineColor="subColor"
				:inactiveStyle="{fontSize:'17px',color:'#111'}"
				:activeStyle="{fontSize:'17px',fontWeight:'bold',color:'#111'}" @change="tabChange">
			</u-tabs>
		</view>
		<view class="f-1 bf8">
			<view class="pt10" style="width: 100%;height:100%">
				<view class="p-0-10 bs6">
					<view class="c6 mb10 dfbc" v-if="list">
						<text>即将叫号接客</text>
						<view>
							<u-button shape="circle" size="small" text="清空" @click="delAll"></u-button>
						</view>
					</view>
					<view class="p10 bf bs6  mb10" v-for="(item,index) in list" :key="index" @click="clickItem(item)">
						<view class="dfbc">
							<view class="w60">
								<view class="f26 wei6 c0 mb10">{{item.serialNum}}</view>
							</view>
							<view class=" dfa">
								<u-button shape="circle" type="success" :customStyle="{color:'#fff'}" text="叫号"
									@click.native.stop="call(item)"></u-button>
								<view class="pr10"></view>
								<u-button shape="circle" type="primary" :customStyle="{color:'#fff'}" text="就餐"
									@click.native.stop="repast(item)"></u-button>
								<view class="pr10"></view>
								<u-button shape="circle" type="warning" text="过号"
									@click.native.stop="pass(item)"></u-button>
							</view>
						</view>
						<view class="c6 f12 dfbc">
							<view>人数：{{item.number}}人</view>
							<view>已等待{{item.waitTime}}分钟</view>
						</view>
					</view>
					<view v-if="list.length==0" class="np f-c-c">
						<view class="iconfont icon-queshengtu cb" style="font-size: 90rpx;"></view>
						<view class="f12 cb mt20">暂无订单</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<view v-if="!showTable" class="bott bf p10 bs5" @click="showTable=true">
			展开<u-icon name="arrow-down" color="#888" size="28"></u-icon>
		</view>
		<u-popup v-else :show="showTable" :overlay="false" :closeable="true" mode="bottom" @close="close">
			<view class="tableBox">
				<view class="mt15 tac c9">点击桌型即可取号</view>
				<view class="mt10 p10" style="border-top:1px solid #ddd">
					<scroll-view class="tabis" scroll-x="true">
						<view :style="{width:scrollW+'rpx'}">
							<view class="tabi bs5" v-if="v.queueSwitch==1" v-for="(v,i) in tabs" :key="i"
								@click="clickTab(v,i)">
								<view class="f18 wei6">{{v.serialNum}}</view>
								<view class="f12">{{v.name}}({{v.minNum}} ~ {{v.maxNum}})人</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<u-modal v-if="showTab" :show="showTab" :negativeTop="200" title="用餐人数" confirmText="确定" showCancelButton
			:confirmColor="subColor" cancelColor="#999" @confirm="confirmTab" @cancel="cancelTab"
			@close="showTab = false" :closeOnClickOverlay="true" zoom>
			<view class="slot-content">
				<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="70px">
					<u-form-item label="用餐人数:" prop="people" borderBottom ref="item1">
						<u--input v-model="form.people" type="number" placeholder="请输入用餐人数" border="none"
							:customStyle="{'width':'300rpx','flex':1,'background': '#fafafa','padding': '10px 15px',}"
							clearable>
						</u--input>
					</u-form-item>
					<u-form-item label="备注:" prop="note" borderBottom ref="item1">
						<u--input v-model="form.note" placeholder="请输入备注" border="none"
							:customStyle="{'width':'300rpx','flex':1,'background': '#fafafa','padding': '10px 15px',}"
							clearable>
						</u--input>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	// import route from '../../../uni_modules/uview-ui/libs/util/route';
	export default {
		components: {},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				storeId: uni.getStorageSync('storeId'),
				timer: null,
				showTable: false,
				showTab: false,
				current: "",
				scrollW: 0,
				tabs: [],
				form: {
					people: "",
					note: ""
				},
				list: [],
				rules: {
					people: [{
						required: true,
						message: "请输入用餐人数",
						trigger: "blur"
					}]
				}
			}
		},
		onLoad() {
			this.getType()
			setTimeout(() => {
				this.fetchData()
			}, 200)
			this.timer = setInterval(() => {
				this.fetchData();
			}, 30000);
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		methods: {
			async fetchData() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: `${this.api.queuingUp}?storeId=${this.storeId}`,
					data: {
						pageSize: 999,
						type_id: this.current
					}
				})
				this.list = list ? list : [];
				this.list.forEach(v => {
					v.waitTime = this.gettime(v.created_at) || 0
				})
			},
			gettime(t) {
				var time1 = new Date().getTime(); //当前的时间戳
				var time2 = new Date(t).getTime(); //指定时间的时间戳
				var time = time1 - time2;
				var result = null;
				if (time / 60000 >= 1) {
					result = parseInt(time / 60000)
				}
				return result
			},
			async getType() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: `${this.api.tableType}?storeId=${this.storeId}`,
					data: {
						pageSize: 999,
					}
				})
				this.tabs = list ? list : [];
				this.tabs.unshift({
					id: "",
					name: "全部"
				})
				// this.tabs.forEach(async v => {
				// 	const {
				// 		data
				// 	} = await this.beg.request({
				// 		url: `${this.api.queuingUp}?storeId=${this.storeId}`,
				// 		data: {
				// 			pageSize: 999,
				// 			type_id: v.id
				// 		}
				// 	})
				// 	v.badge = {
				// 		value: data.list.length,
				// 	}
				// })
				this.scrollW = this.tabs.length * 240
			},
			tabChange(e) {
				this.current = e.id
				this.fetchData()
			},
			async call(v) {
				const {
					msg
				} = await this.beg.request({
					url: `${this.api.queueCall}/${v.id}`,
					method: "GET",
				})
				uni.$u.toast(msg)
				this.fetchData()
			},
			async repast(v) {
				uni.showModal({
					title: "温馨提示",
					content: "该号确认就餐吗？",
					success: async (res) => {
						if (res.confirm) {
							const {
								msg
							} = await this.beg.request({
								url: `${this.api.queuingUp}/${v.id}`,
								method: "PUT",
								data: {
									state: 3
								}
							})
							uni.$u.toast("操作成功")
							this.fetchData()
						}
					}
				});
			},
			async pass(v) {
				uni.showModal({
					title: "温馨提示",
					content: "该号确认过号吗？",
					success: async (res) => {
						if (res.confirm) {
							const {
								msg
							} = await this.beg.request({
								url: `${this.api.queuingUp}/${v.id}`,
								method: "PUT",
								data: {
									state: 2
								}
							})
							uni.$u.toast("操作成功")
							this.fetchData()
						}
					}
				});
			},
			clickItem(v) {
				uni.navigateTo({
					url: `/pages/order/queuingUp/edit?row=${JSON.stringify(v)}`
				})
			},
			//清空
			async delAll() {
				if (this.list) {
					uni.showModal({
						title: "温馨提示",
						content: "你确定清除全部吗？",
						success: async (res) => {
							if (res.confirm) {
								const {
									msg
								} = await this.beg.request({
									url: `${this.api.clear}?storeId=${this.storeId}`,
									method: "GET",
								})
								uni.$u.toast(msg)
								this.fetchData()
							}
						},
					})
				}
			},
			//底部弹窗
			close() {
				this.showTable = false
			},
			clickTab(v, i) {
				this.form.type_id = v.id
				this.showTab = true
			},
			confirmTab() {
				this.$refs.uForm.validate().then(async res => {
					const {
						msg
					} = await this.beg.request({
						url: `${this.api.queuingUp}`,
						method: "POST",
						data: {
							...this.form,
							storeId: this.storeId
						}
					})
					uni.$u.toast(msg)
					this.showTab = false
					this.fetchData()
				}).catch(errors => {
					uni.$u.toast('请填写用餐人数')
				})
			},
			cancelTab() {
				this.showTab = false
				this.form = {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		padding: 5rpx 0;
		border-radius: 15rpx;
		background-color: #fff;
		overflow: hidden;
	}

	.tab {
		padding: 15rpx;
		width: 50%;
	}

	.isTab {
		// border-radius: 15rpx;
		font-weight: 600;
		color: #fff;
	}

	/deep/.u-button {
		width: 120rpx !important;
		height: 70rpx !important;
	}

	.buts {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9999;
	}

	.bott {
		position: fixed;
		bottom: 60rpx;
		right: 20rpx;
		padding: 20rpx;
	}

	/deep/.u-popup {
		height: 120px !important;
	}

	.tableBox {
		box-shadow: 0px -5px 15px 5px #ededed;

		.tabis {
			width: 100%;
			overflow-x: auto;

			.tabi {
				display: inline-flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				padding: 10rpx 20rpx;
				width: 220rpx;
				height: 100rpx;
				border: 2rpx solid #ddd;
			}
		}
	}
</style>